<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Coder-nav-个人设置</title>
    <script src="/js/jquery/jquery.js"></script>
    <script src="/js/jquery/adsorb.js"></script>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/axios.js"></script>
    <script src="/js/vue/element-ui.js"></script>
    <script src="/js/util.js"></script>
    <style>
        @import url("/css/vue/element-ui.css");
        #main {
            position: absolute;
            width: 65%;
            height: 1px;
            top: 50px;
            left: 50%;
            transform: translate(-50%, 0);
        }
        .el-table__body-wrapper::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" style="position: fixed;z-index: 999;">
        <template #content>
            <el-select ref="selectRef" v-model="selectedState" size="small" style="width: 155px">
                <el-option label="🍡&emsp;导航主页" value="0"><el-link href="/">🍡&emsp;导航主页</el-link></el-option>
                <el-option label="📌&emsp;记事本" value="1"><el-link href="/memo">📌&emsp;记事本</el-link></el-option>
                <el-option label="💰&emsp;记账本" value="2"><el-link href="/cash">💰&emsp;记账本</el-link></el-option>
                <el-option label="🌈&emsp;动态页面" value="3"><el-link href="/page">🌈&emsp;动态页面</el-link></el-option>
                <el-option label="⏱️&emsp;定时任务" value="4"><el-link href="/task">⏱️&emsp;定时任务</el-link></el-option>
                <el-option label="⚙️&emsp;个人设置" value="5"><el-link href="/setting">⚙️&emsp;个人设置</el-link></el-option>
                <el-option label="📖&emsp;帮助手册" value="6"><el-link href="/readme">📖&emsp;帮助手册</el-link></el-option>
                <el-option label="🛠️&emsp;接口文档" value="7"><el-link href="/doc.html">🛠️&emsp;接口文档</el-link></el-option>
                <el-option label="↪️&emsp;退出登录" value="-1" @click.native="clearToken"></el-option>
            </el-select>
        </template>
    </el-page-header>
    <div id="main" align="center">
        <template>
            <!-- 表格数据 -->
            <el-table :data="tableData" border style="width: 1264px">

                <!-- 字段 -->
                <el-table-column prop="desc" label="Desc" width="200">
                    <template slot-scope="scope">
                        <strong style="padding-left: 15px;color: grey">{{scope.row.desc}}</strong>
                    </template>
                </el-table-column>

                <!-- 值 -->
                <el-table-column align="center" prop="params" label="Params">
                    <template slot-scope="scope">
                        <el-input v-if="scope.row.key==='password'" class="add" type="password" v-model=scope.row.params placeholder="重置密码"></el-input>
                        <el-input v-if="scope.row.key!=='password'" class="add" v-model=scope.row.params :autosize="{minRows:1,maxRows:25}" type="textarea" style="font-size: 16px;"></el-input>
                    </template>
                </el-table-column>

                <!-- 操作 -->
                <el-table-column align="center" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="saveSetting(scope.row.key, scope.row.params)">保存</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <br/><br/><br/>
        </template>
        <br/><br/>
    </div>
</div>
<script th:inline="javascript">
    // 表格
    var Main = {
        data() {
            return {
                selectedState: '5',
                // 表格
                tableData: [],
            }
        },
        mounted:function() {
            // 检查Token
            this.checkToken()
        },
        methods: {
            initData() {
                this.getList()
            },
            // 检查Token
            checkToken() {
                localStorage.setItem('jump', window.location.href);
                console.log(window.location.href)
                axios.get('/login/checkToken', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    if(!response.data.data) {
                        localStorage.setItem('token', '')
                        window.location.href = '/login'
                        return;
                    }
                    this.initData()
                });
            },
            // 返回
            goBack() {
                history.back()
            },
            // 列表
            getList() {
                this.$loading()
                axios.get('/setting/getSettingList', {
                    headers: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    this.$data.tableData = response.data.data;
                    this.$loading().close()
                }).catch((response) => {
                    this.$loading().close()
                    this.$message.error(response)
                });
            },
            // 保存
            saveSetting(key, params) {
                this.$loading()
                params = params.replace(/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/gm, '');
                axios.post('/setting/saveSetting',{
                    key: key,
                    params: params,
                }, {
                    headers: {
                        token: localStorage.getItem('token')
                    },
                }).then((response) => {
                    if(response.data.code === 200) {
                        this.initData()
                        if(key === 'password') {
                            this.$message.info('重置密码成功，需重新登录')
                            var that = this
                            setTimeout(function(){
                                that.checkToken()
                            }, 1000)
                        } else {
                            this.$message.info('保存成功')
                        }
                    } else {
                        this.$message.error(response.data.msg)
                    }
                }).catch((response) => {
                    this.$message.error(response)
                });
            },
            clearToken() {
                axios.get('/logout', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    localStorage.setItem('token', '')
                    this.checkToken()
                    this.$message.info("退出登录成功")
                })
            },
            jump(url) {
                window.location.href = url
            },
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>
</body>
</html>